<template>
	<view class="">
		<view class="content">
			<u-search @focus="tosousuo" placeholder="请输入关键字" :show-action="false" margin="20rpx" bg-color="#fff">
			</u-search>
			<u-swiper :list="list1" height="400" border-radius="0"></u-swiper>
		</view>
		<view class="daohang">
			<view class="daohangicon" v-for="item,index in channel" :key="index">
				<image :src="item.icon_url" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="zhizaoshang">
			<view class="zhizaoshang-t">品牌制造商直供</view>
			<view class="zhizaoshang-b">
				<view class="zhizaoshang-i" v-for="item in brandList" :style="{backgroundImage:`url(${item.pic_url})`}">
					<view>{{item.name}}</view>
					<view style="color: darkred;">￥{{item.floor_price.toFixed(2)}}元</view>
				</view>
			</view>
		</view>
		<view class="new">
			<view class="new-t">周一周四 · 新品发布</view>
			<view class="new-b">
				<view class="new-i" v-for="item in newGoodsList">
					<image :src="item.list_pic_url" mode=""></image>
					<view>{{item.name}}</view>
					<view style="color: darkred;">￥{{item.retail_price.toFixed(2)}}元</view>
				</view>
			</view>
		</view>
		<view class="renqi">
			<view class="renqi-t">人气推荐</view>
			<view class="renqi-b">
				<view class="renqi-i" v-for="item in hotGoodsList">
					<image :src="item.list_pic_url" mode=""></image>
					<view class="renqi-text">
						<view style="font-size: 36rpx;">{{item.name}}</view>
						<view>{{item.goods_brief}}</view>
						<view style="color: darkred;">￥{{item.retail_price.toFixed(2)}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zhuanti">
			<view class="zhuanti-t">专题精选</view>
			<view class="zhuanti-c">
				<view class="zhuanti-b" :style="{width:`${topicList.length * 680}rpx`}">
					<view class="zhuanti-i" v-for="item in topicList">
						<image :src="item.scene_pic_url" mode=""></image>
						<view style="font-size: 36rpx;">{{item.title}}&nbsp;&nbsp;&nbsp;</view>
						<view style="color: darkred;">￥{{item.price_info.toFixed(2)}}元</view>
						<view class="wenben">{{item.subtitle}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: {},
				list1: [],
				channel: [],
				brandList: [],
				newGoodsList: [],
				hotGoodsList: [],
				topicList: []
			}
		},
		onLoad() {
			this.$request({
				url: "index/index",
				method: "GET",
				successCb: res => {
					console.log(res);
					this.res = res
					this.list1 = res.banner.map(item => {
						return item.image_url
					})
					this.channel = res.channel
					this.brandList = res.brandList
					this.newGoodsList = res.newGoodsList
					this.hotGoodsList = res.hotGoodsList
					this.topicList = res.topicList
				}
			})
		},
		methods: {
			tosousuo() {
				uni.navigateTo({
					url: "/pages/sousuo/sousuo"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.daohangicon,
	.zhizaoshang,
	.new,
	.renqi,
	.zhuanti {
		background-color: #fff;
	}

	.daohang,
	.daohangicon,
	.zhizaoshang-b,
	.new-b,
	.renqi-i,
	.renqi-text {
		display: flex;
	}

	.daohang,
	.zhizaoshang,
	.new {
		margin-bottom: 50rpx;
	}

	.daohangicon {
		width: 24%;
		flex-direction: column;
		align-items: center;
		padding-bottom: 20rpx;
		border: 2rpx solid #eee;
	}

	.daohangicon image {
		width: 56rpx;
		height: 56rpx;
		margin: 20rpx 0;
	}

	.zhizaoshang-t,
	.new-t,
	.renqi-t,
	.zhuanti-t {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 40rpx;
	}

	.zhizaoshang-b {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.zhizaoshang-i {
		box-sizing: border-box;
		padding: 20rpx;
		height: 230rpx;
		width: 49%;
		background-size: cover;
		margin-bottom: 6rpx;
	}



	.new-b {
		flex-wrap: wrap;
	}

	.new-i {
		width: 50%;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.new-i image {
		width: 100%;
		height: 346rpx;
	}

	.renqi-i {
		padding: 16rpx 32rpx;
		background-color: #f5f5f5;
		margin-bottom: 20rpx
	}

	.renqi image {
		width: 176rpx;
		height: 176rpx;
		margin-right: 30rpx;
	}

	.renqi-text {
		flex: 1;
		font-size: 20rpx;
		align-items: center;
		flex-wrap: wrap;
	}

	.renqi-text view {
		width: 100%;
	}

	.zhuanti-c {
		width: 750rpx;
		overflow: auto;
	}



	.zhuanti-b view,
	.zhuanti-b image {
		display: inline-block;
	}

	.zhuanti-i {
		width: 640rpx;
		margin: 0 20rpx;
	}

	.wenben {
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 640rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
</style>
